<template>
  <div class="work-report-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>报工审核</h2>
    </div>
    <!-- 工单信息表单 -->
    <el-form ref="formRef" :model="workOrderData" label-width="120px" class="work-order-form">
      <!-- 编码 -->
      <el-form-item label="编码:">
        <el-input v-model="workOrderData.workCode" disabled />
      </el-form-item>

      <!-- 类型 -->
      <el-form-item label="类型:">
        <el-select v-model="workOrderData.type" disabled>
          <el-option label="正常" :value="1" />
          <el-option label="委外" :value="2" />
          <el-option label="自建工单" :value="3" />
        </el-select>
      </el-form-item>

      <!-- 状态 -->
      <el-form-item label="状态:">
        <el-select v-model="workOrderData.states" disabled>
          <el-option label="初始化" :value="1" />
          <el-option label="备料中" :value="2" />
          <el-option label="备料完成" :value="3" />
          <el-option label="已开工" :value="4" />
          <el-option label="暂停" :value="5" />
          <el-option label="完工" :value="6" />
          <el-option label="结案" :value="7" />
          <el-option label="已下发" :value="8" />
        </el-select>
      </el-form-item>
      <!-- 计划起止日期 -->
      <el-form-item label="计划起止日期:">
        <el-date-picker v-model="workOrderData.startTime" type="date" style="width: 100%" disabled />
      </el-form-item>

      <!-- 计划结束日期 -->
      <el-form-item label="计划结束日期:">
        <el-date-picker v-model="workOrderData.endTime" type="date" style="width: 100%" disabled />
      </el-form-item>

      <!-- 数量 -->
      <el-form-item label="数量:">
        <el-input v-model="workOrderData.workNum" disabled />
      </el-form-item>

      <!-- 是否允许跳工序 -->
      <el-form-item label="是否允许跳工序:">
        <el-radio-group v-model="workOrderData.isSkipprocess" disabled>
          <el-radio :label="true">允许</el-radio>
          <el-radio :label="false">不允许</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 来源 -->
      <el-form-item label="来源:">
        <el-radio-group v-model="workOrderData.scoure" disabled>
          <el-radio :label="1">MES</el-radio>
          <el-radio :label="2">ERP</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 备注 -->
      <el-form-item label="备注:">
        <el-input v-model="workOrderData.remark" type="textarea" :rows="4" disabled resize="vertical" />
      </el-form-item>
    </el-form>

    <!-- 工艺路线表格 -->

    <!-- 审批数据表格 -->
    <div class="approval-data-section">
      <h3>审批数据</h3>
      <el-table border style="width: 100%" :data="approvalData">
        <el-table-column prop="shenQiName" label="申请人名称" width="100" />
        <el-table-column prop="personName" label="当前审批人" width="150" />
        <el-table-column prop="netxPersonName" label="下一个审批人" width="100" />
        <el-table-column prop="currNodeNo" label="上一节点" width="150" />
        <el-table-column prop="currNodeName" label="上一节点名称" width="150" />
        <el-table-column prop="nodeNextNo" label="下一节点编号" width="150" />
        <el-table-column prop="nodeNextName" label="下一节点名称" width="150" />
        <el-table-column prop="state" label="状态" width="100" />
        <el-table-column prop="yjian" label="意见" min-width="200" />
        <!-- 添加审批按钮列 - 这里保持您的修改，直接传递shenPiId -->
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleTableApprove(scope.row.shenPiId)">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 审批对话框 -->
    <el-dialog
      v-model="approvalDialogVisible"
      title="审批操作"
      width="500px"
      :before-close="handleDialogClose"
    >
      <el-form :model="dialogForm" label-width="80px">
        <el-form-item label="审批ID:">
          <el-input v-model="dialogForm.shenPiId" disabled />
        </el-form-item>
        <el-form-item label="审批意见:" prop="yjian">
          <el-input
            v-model="dialogForm.yjian"
            type="textarea"
            :rows="4"
            placeholder="请输入审批意见"
            resize="vertical"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handleDialogApprove">同意</el-button>
          <el-button type="danger" @click="handleDialogReject">拒绝</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { APIs } from '@/Http/http'
import { useRoute } from 'vue-router'
import { useCounterStore } from '@/stores/counter'


// 加载状态
const loading = ref<boolean>(false)
const pinia=useCounterStore();
// 数据是否已加载
const isDataLoaded = ref<boolean>(false)

// 工单数据
const workOrderData = reactive({
"createName": "string",
"createTime": "",
"updateName": "string",
"updateTime": "",
"deleteName": "string",
"deleteTime": "",
"isDel": true,
"workId": 0,
"workCode": "",
"type": 0,
"customerId": 0,
"productId": 0,
"processroutId": 0,
"productionlineId": 0,
"startTime": "",
"workNum": 0,
"isSkipprocess": true,
"scoure": 0,
"states": 0,
"remark": "string",
"dingDanId": 0,
"endTime": ""
})

// 审批数据
const approvalData = ref([])

// 审批对话框相关
const approvalDialogVisible = ref(false)
const currentShenPiId = ref<string | null>(null) // 保存当前审批项的主键
const dialogForm = reactive({
  shenPiId: '',
  yjian: '',
  num: 0
})

const qz=useRoute();
const formRef = ref<any>(null)                      

const Data=()=>{
  APIs.get("/api/Read/GetWorkOrderById",{params:{
    WorkId:qz.query.id
  }}).then(res=>{
    Object.assign(workOrderData,res.data.data)
    isDataLoaded.value = true
    })  
  }
  
  // 获取审批数据
  const fetchApprovalData = () => {
    APIs.get("/api/Read/GetAllShenPi").then(res=>{
  {
    approvalData.value=res.data.data
  }
    })
  }

// 表格中的审批按钮处理函数 - 打开对话框
const handleTableApprove = (shenPiId: any) => {
  try {
    // 保存当前审批项的主键
    currentShenPiId.value = shenPiId
    
    // 填充对话框表单
    dialogForm.shenPiId = shenPiId
    dialogForm.yjian = '' // 重置审批意见
    dialogForm.num = 0 // 重置审批类型
    
    // 显示对话框
    approvalDialogVisible.value = true
  } catch (error) {
    console.error('打开审批对话框失败:', error)
    ElMessage.error('打开审批对话框失败，请稍后重试')
  }
}

// 对话框中的同意按钮处理函数
const handleDialogApprove = () => {
{
    loading.value = true
    dialogForm.num = 1
    dialogForm.shenPiId = currentShenPiId.value || ''
    
    console.log('提交审批数据:', dialogForm)
    // 调用审批API
    APIs.post("/api/Write/UpdateShenPi", dialogForm).then(res => {
      loading.value = false
      if (res.data.code === 100) {
        ElMessage.success('审批已同意')
        approvalDialogVisible.value = false
        fetchApprovalData()
      } 
    })
  }
}

// 对话框中的拒绝按钮处理函数
const handleDialogReject = () => {
 {
   loading.value = true
    dialogForm.num = 2
    dialogForm.shenPiId = currentShenPiId.value || ''
    
    console.log('提交审批数据:', dialogForm)
    // 调用审批API
    APIs.post("/api/Write/UpdateShenPi", dialogForm).then(res => {
      loading.value = false
      if (res.data.code === 100) {
        ElMessage.success('审批已同意')
        approvalDialogVisible.value = false
        fetchApprovalData()
      } 
    })
  }
}

// 对话框关闭处理函数
const handleDialogClose = () => {
  // 重置对话框状态
  dialogForm.shenPiId = ''
  dialogForm.yjian = ''
  dialogForm.num = 0
  currentShenPiId.value = null
  
  // 隐藏对话框
  approvalDialogVisible.value = false
}
onMounted(() => {
  Data()
  fetchApprovalData()
})
</script>

<style scoped>
.work-report-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.work-order-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.process-route-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.approval-data-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.approval-action-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.process-route-section h3,
.approval-data-section h3 {
  margin: 0 0 15px 0;
  color: #303133;
}

.approval-buttons {
  margin-top: 20px;
  text-align: right;
}

/* 对话框样式调整 */
:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-input__inner) {
  border-radius: 4px;
}

.dialog-footer {
  text-align: right;
}
</style>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>